import type { SystemUserItem } from "@/api/services/systemUserService";
import systemUserService from "@/api/services/systemUserService";
import { Form, Input, Modal, Select, message } from "antd";
import { useEffect } from "react";

interface UserModalProps {
	visible: boolean;
	user: SystemUserItem | null;
	onSuccess: () => void;
	onCancel: () => void;
}

const UserModal = ({ visible, user, onSuccess, onCancel }: UserModalProps) => {
	const [form] = Form.useForm();
	const isEdit = !!user;

	useEffect(() => {
		if (visible && user) {
			form.setFieldsValue({
				...user,
				role_id: user.role.id,
			});
		} else {
			form.resetFields();
		}
	}, [visible, user, form]);

	const handleOk = async () => {
		try {
			const values = await form.validateFields();
			if (isEdit) {
				await systemUserService.userEdit({
					id: user.id,
					...values,
				});
				message.success("修改成功");
			} else {
				await systemUserService.userAdd(values);
				message.success("添加成功");
			}
			onSuccess();
		} catch (error) {
			message.error(isEdit ? "修改失败" : "添加失败");
		}
	};

	return (
		<Modal
			title={isEdit ? "编辑用户" : "新增用户"}
			open={visible}
			onOk={handleOk}
			onCancel={onCancel}
			destroyOnClose
		>
			<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
				<Form.Item
					name="username"
					label="用户名"
					rules={[
						{ required: true, message: "请输入用户名" },
						{ min: 3, message: "用户名至少3个字符" },
					]}
				>
					<Input disabled={isEdit} placeholder="请输入用户名" />
				</Form.Item>

				{!isEdit && (
					<Form.Item
						name="password"
						label="密码"
						rules={[
							{ required: true, message: "请输入密码" },
							{ min: 6, message: "密码至少6个字符" },
						]}
					>
						<Input.Password placeholder="请输入密码" />
					</Form.Item>
				)}

				<Form.Item
					name="nickname"
					label="昵称"
					rules={[{ required: true, message: "请输入昵称" }]}
				>
					<Input placeholder="请输入昵称" />
				</Form.Item>

				<Form.Item
					name="email"
					label="邮箱"
					rules={[
						{ required: true, message: "请输入邮箱" },
						{ type: "email", message: "请输入正确的邮箱格式" },
					]}
				>
					<Input placeholder="请输入邮箱" />
				</Form.Item>

				<Form.Item
					name="mobile"
					label="手机号"
					rules={[
						{ required: true, message: "请输入手机号" },
						{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号格式" },
					]}
				>
					<Input placeholder="请输入手机号" />
				</Form.Item>

				<Form.Item name="avatar" label="头像">
					<Input placeholder="请输入头像URL" />
				</Form.Item>

				<Form.Item
					name="role_id"
					label="角色"
					rules={[{ required: true, message: "请选择角色" }]}
				>
					<Select
						placeholder="请选择角色"
						options={[
							{ label: "管理员", value: 1 },
							{ label: "普通用户", value: 2 },
						]}
					/>
				</Form.Item>

				<Form.Item
					name="status"
					label="状态"
					rules={[{ required: true, message: "请选择状态" }]}
				>
					<Select
						placeholder="请选择状态"
						options={[
							{ label: "启用", value: 1 },
							{ label: "禁用", value: 0 },
						]}
					/>
				</Form.Item>
			</Form>
		</Modal>
	);
};

export default UserModal;
